<template>
  <!--控制按钮显示-->
  <!--添加子节点-->
  <div>
  <div v-if="btnShow" class="btn-wrap">
    <a v-if="this.permissionData[0].dataPermissionAdd !== ''">
      <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(1)" type="primary" style="margin-top:8px;margin-right: 10px" v-has="this.permissionData[0].dataPermissionAdd">添加子{{this.buttonTitle}}</a-button>
    </a>
    <a v-else>
      <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(1)" type="primary" style="margin-top:8px;margin-right: 10px" >添加子{{this.buttonTitle}}</a-button>
    </a>
    <!--添加子节点-->
    <a v-if="this.permissionData[0].dataPermissionAdd !== ''">
      <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(2)" type="primary" style="margin-top:8px;margin-right: 10px" v-has="this.permissionData[0].dataPermissionAdd">添加一级{{this.buttonTitle}}</a-button>
    </a>
    <a v-else>
      <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(2)" type="primary" style="margin-top:8px;margin-right: 10px" >添加一级{{this.buttonTitle}}</a-button>
    </a>
    <!--编辑节点-->
    <a v-if="this.permissionData[0].dataPermissionEdit">
      <a-button v-if="this.permissionKeys[0].editKey == '1'" @click="handleTreeEdit" type="primary" style="margin-top:8px;margin-right: 10px" v-has="this.permissionData[0].dataPermissionEdit">编辑{{this.buttonTitle}}</a-button>
    </a>
    <a v-else>
      <a-button v-if="this.permissionKeys[0].editKey == '1'" @click="handleTreeEdit" type="primary" style="margin-top:8px;margin-right: 10px" >编辑{{this.buttonTitle}}</a-button>
    </a>
    <!--删除节点-->
    <a v-if="this.permissionData[0].dataPermissionDelete">
      <a-button v-if="this.permissionKeys[0].deleteKey == '2'" @click="handleTreeDelete" type="primary" style="margin-top:8px;margin-right: 10px" v-has="this.permissionData[0].dataPermissionDelete">删除{{this.buttonTitle}}</a-button>
    </a>
    <a v-else>
      <a-button v-if="this.permissionKeys[0].deleteKey == '2'" @click="handleTreeDelete" type="primary" style="margin-top:8px;margin-right: 10px" >删除{{this.buttonTitle}}</a-button>
    </a>
    <!--刷新-->
    <a v-if="this.permissionData[0].dataPermissionRefresh">
      <a-button v-if="this.permissionKeys[0].refreshKey == '3'" @click="refresh" type="primary" icon="reload" style="margin-top:8px;" :loading="loading" v-has="this.permissionData[0].dataPermissionRefresh">刷新</a-button>
    </a>
    <a v-else>
      <a-button v-if="this.permissionKeys[0].refreshKey == '3'" @click="refresh" type="primary"style="margin-top:8px;" icon="reload" :loading="loading" >刷新 </a-button>
    </a>
    <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" style="margin-left: 10px">
      <a-button type="primary" style="margin-top:8px;" icon="import">导入</a-button>
    </a-upload>
  </div>
    <div class="left-wrap" style="box-shadow: 10px 10px 5px #a0a3a8;border-radius: 2px;height:calc(100vh - 220px);margin-top: 5px; width:calc(30%);float: left;overflow: auto;">
    <div class="tree-wrap">
      <a-col v-if="showSearch">
        <a-input-search @change="onSearch" style="width:100%;margin-top: 10px;margin-bottom: 5px" allowClear :placeholder="placeholder"/>
      </a-col>
      <a-alert type="info" :showIcon="true">
        <div slot="message">
          当前选择：
          <a v-if="currSelected.title">{{ getCurrSelectedTitle() }}</a>
          <a v-if="currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
        </div>
      </a-alert>
      <template v-if="checkable==false">
        <a-tree
          @select="onSelect"
          @rightClick="rightHandle"
          @expand="onexpand"
          show-icon
          :loadedKeys="loadedKeys"
          :loadData="onLoadData"
          :treeData="treeSource"
          :selectedKeys="selectedKeys"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
        >
          <template slot="title" slot-scope="{ title }">
        <span v-if="title.indexOf(keyWord) > -1">
          {{ title.substr(0, title.indexOf(keyWord)) }}
          <span style="color: #f50">{{ keyWord }}</span>
          {{ title.substr(title.indexOf(keyWord) + keyWord.length) }}
        </span>
            <span v-else>{{ title }}</span>
          </template>
          <a-icon :slot="this.icon[0].slot" :type="this.icon[0].linkType" :style="this.icon[0].style"/>
          <a-icon :slot="this.icon[1].slot" :type="this.icon[1].linkType" :style="this.icon[1].style"/>
        </a-tree>
      </template>
      <template v-else>
        <a-tree
          multiple
          @select="onSelect"
          @rightClick="rightHandle"
          @expand="onexpand"
          show-icon
          checkable
          :checkStrictly="checkStrictly"
          @check="onCheck"
          :loadedKeys="loadedKeys"
          :loadData="onLoadData"
          :treeData="treeSource"
          :selectedKeys="selectedKeys"
          :checkedKeys="checkedKeys"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
        >
          <a-icon :slot="this.icon[0].slot" :type="this.icon[0].linkType" :style="this.icon[0].style"/>
          <a-icon :slot="this.icon[1].slot" :type="this.icon[1].linkType" :style="this.icon[1].style"/>
        </a-tree>
      </template>
    </div>
  </div>
    <div style="box-shadow: 10px 10px 5px #a0a3a8;border-radius: 2px;height:calc(100vh - 220px); margin-top: 5px;width:calc(68% - 5px);float: right; overflow: auto;padding-left: 10px;">
      <div class="area-title">{{rightTitle}}</div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">
      </a-table>
    </div>
  </div>
</template>

<script>
  import ACol from 'ant-design-vue/es/grid/Col'
  import { LoneAsncTreeMixin } from '@/mixins/LoneAsncTreeMixin'
  import { LoneMultiListMixin } from '@/mixins/LoneMultiListMixin'
  export default {
    name: 'LoneAsncTree',
    components: { ACol },
    mixins: [LoneAsncTreeMixin, LoneMultiListMixin],
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    props: {
      rightTitle: {
        type: String,
        required: true,
        default: ''
      },
      initDataFatherFunction:{
        type: Function,
        default: null
      },
      onLoadDataFatherFunction:{
        type: Function,
        default: null
      },
      addFatherFunction:{
        type: Function,
        default: null
      },
      editFatherFunction:{
        type: Function,
        default: null
      },
      deleteFatherFunction:{
        type: Function,
        default: null
      },
      searchKeyWordFunction:{
        type: Function,
        default: null
      },
      refreshFatherFunction:{
        type: Function,
        default: null
      },
      permissionKeys: {
        type: Array,
        required: false
      },
      permissionData: {
        type: Array,
        required: false
      },
      url: {
        type: Object,
        required: true
      },
      childrenUrl: {
        type: String,
        default: null
      },
      buttonTitle: {
        type: String,
        required: true,
        default:'节点'
      },
      dropTrigger: {
        type: String,
        required: false
      },
      placeholder: {
        type: String,
        required: false
      },
      selectedKeyData:{
        type: String,
        required: false
      },
      dbClick:{
        type: String,
        required: false
      },
      columns:{
        type: Array,
        required: false
      },
      icon:{
        type: Array,
        required: false,
        default: ()=>[
          {
            //叶子节点
            slot :'smile',//图标分模块化
            linkType : 'heat-map',//图标类型
            style :'color:green' //图标显示颜色
          },
          {
            //非叶子结点
            slot :'meh',//图标分模块化
            linkType : 'login',//图标类型
            style :'color:blue' //图标显示颜色
          }
        ]
      },
      multiple: {
        type: Boolean,
        required: false
      },
      checkable: {
        type: Boolean,
        required: false
      },
      onCheckKey: {
        type: String,
        required: false
      },
      btnShow: {
        type: Boolean,
        default: true
      },
      //2020年12月17日19点12分 扩展参数控制搜索框显示隐藏
      showSearch:{
        type: Boolean,
        default: true
      }
    },
    methods:{
      handleImportExcel(info){
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          if (info.file.response.success) {
            // this.$message.success(`${info.file.name} 文件上传成功`);
            if (info.file.response.code === 201) {
              let { message, result: { msg, fileUrl, fileName } } = info.file.response
              let href = window._CONFIG['domianURL'] + fileUrl
              this.$warning({
                  title: message,
                  content: (
                    <div>
                    <span>{msg}</span><br/>
                    <span>具体详情请 <a href={href} target="_blank" download={fileName}>点击下载</a> </span>
                </div>
              )
            })
            } else {
              this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
            }
            this.initData()
          } else {
            this.$message.error(`${info.file.name} ${info.file.response.message}.`);
          }
        } else if (info.file.status === 'error') {
          this.$message.error(`文件上传失败: ${info.file.msg} `);
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .area-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 10px;
    &:before {
      content: '';
      width: 4px;
      height: 14px;
      background-color: #1890FF;
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .ant-card-body{
    .clearfix{
      .custom-card{
        /deep/ .ant-card-body{
          padding: 0 4px!important;
        }
      }
    }
  }
</style>